<template>
  <div id="app" class="indexSports">
    <a-row :gutter="12">
      <a-col :sm="24" :xl="12" class="mb">
        <card :title="'考勤'" :routerUrl="'/attendance/skCard'">
          <template slot="cardMain">
            <a-row type="flex" justify="space-between">
              <a-col v-for="(item, index) in list" :key="item.title">
                <img class="take-notes-img" :src="item.img" alt="" />
                <span>{{ item.title }}</span>
                <span class="take-notes-data">{{ item.val }}</span>
                <span v-show="index != list.length - 1">人</span>
              </a-col>
            </a-row>
            <p class="subtitle" style="margin-bottom: 17px;">班级考勤</p>
            <bar :width="'100%'" :barName="attendanceBarName" :seriesName="'出勤率'" :unit="'%'" :barData="attendanceBarData" :height="'255px'" :color="['#00E3B9', '#5dc']" :barWidth="20" :symbolSize="15"></bar>
          </template>
        </card>
      </a-col>
      <a-col :sm="24" :xl="12"  class="mb">
        <card :title="'户外运动'" :routerUrl="'/health/SkSports'">
          <template slot="cardMain">
            <a-row :gutter="6">
              <a-col :span="12">
                <p class="subtitle">人均运动时长</p>
                <bar
                  :width="'100%'"
                  :height="'277px'"
                  :barName="BarName" :barData="sportTimeBarData" :seriesName="'人均运动时长'" :unit="'分钟'"
                  :color="['#41D7F3', '#3D9FFF']"
                  :barWidth="10"
                  :symbolSize="5"
                ></bar>
              </a-col>
              <a-col :span="12">
                <p class="subtitle">人均运动</p>
                <line-bar :width="'100%'" :height="'277px'" :seriesName="['步数','运动量']" :barName="BarName" :lineData="stepLineData" :barData="stepBarData"></line-bar>
              </a-col>
            </a-row>
          </template>
        </card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import Bar from '@/components/Echarts/Bar.vue'
import LineBar from '@/components/Echarts/lineBar.vue'
import u105 from '@/assets/analysis-img/u105.png'
import u106 from '@/assets/analysis-img/u106.png'
import u107 from '@/assets/analysis-img/u107.png'
import u108 from '@/assets/analysis-img/u108.png'
import u94 from '@/assets/analysis-img/u94.png'
import { getAction } from "@/api/manage.js";
export default {
  name: 'indexSports',
  data() {
    return {
      attendanceBarName:[],
      attendanceBarData:[],
      BarName:[],
      sportTimeBarData:[],
      stepLineData:[],
      stepBarData:[],
      list: [
        { img: u94, title: '应到', key: 'shouldArrive', val: 0 },
        { img: u105, title: '实到', key: 'actualArrival', val: 0 },
        { img: u106, title: '请假', key: 'absence', val: 0 },
        { img: u107, title: '迟到', key: 'late', val: 0 },
        { img: u108, title: '出勤率', key: 'rate',val: 0 }
      ]
    }
  },
  components: {
    Bar,
    LineBar
  },

  filters: {},

  computed: {},

  created() {
    
    this.getClassList()
  },

  activated() {},

  mounted() {},

  methods: {
    getClassList(){
      const url = "/management/skClass/list"
      getAction(url).then((res)=>{
      if(res.success){
        this.attendanceBarName = []
        this.BarName = []
        res.result.forEach(item => {
          this.attendanceBarName.push(item.className);
          this.BarName.push(item.className);
        });
        this.getWork("all");
        this.getWork("class");
        this.getSport();
      } else {
        this.$message.warning(res.message);
      }
      }).catch((error)=>{
        console.error(error);
      })
    },
    getWork(statisticalScope){
      let url = "/management/skStudentCheck/getStudentCheckStatistical";
      const params = {
        statisticalScope: statisticalScope,
        timeScope: "today"
      }
      getAction(url,params).then((res)=>{
        if(res.success){
          if (statisticalScope == "all") {
            this.list.forEach(item=>{
              if (res.result.length > 0) {
                item.val = res.result[0][item.key]
              }
              if(item.key == 'rate') {
                item.val = (item.val * 100).toFixed(2)
              }
            })
          }
          if (statisticalScope == "class") {
            if (res.result.length > 0 ) {
              res.result.map(item=>{
                this.attendanceBarData.push((item.rate * 100).toFixed(2))
              })
            }else{
              this.attendanceBarName.forEach(element => {
                this.attendanceBarData.push(0)
              });
            }
          }
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    getSport(){
      const url = "/health/skSportRecord/getSprotStatistical"
      const params= {
        areaType:1,
        startDate:this.$skCommon.getDate(0),
        endDate:this.$skCommon.getDate(0),
        // startDate:"2023-03-17",
        // endDate:"2023-03-18",
        statisticalScope:"class"
      }
      getAction(url,params).then((res)=>{
        if(res.success){
          if (res.result.length > 0) {
            res.result.forEach(item => {
              this.sportTimeBarData.push([item.className, item.avgDuration]);
              this.stepBarData.push([item.className, item.avgStepNumber])
              this.stepLineData.push([item.className, item.avgAmount])
            });
          }else{
            this.attendanceBarName.forEach(element => {
              this.sportTimeBarData.push(0);
              this.stepBarData.push(0)
              this.stepLineData.push(0)
            });
          }
        } else {
          this.message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    }
  }
}
</script>
<style scoped lang="less">
@img-url: '../../assets/analysis-img/';
.mb{
  margin-bottom: 12px;
}
.take-notes-img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.take-notes-data {
  color: #33B6A4;
  margin: 0 2px;
}
.subtitle {
  margin: 10px 0 20px 0;
  padding-left: 22px;
  background: url('@{img-url}u93.png') no-repeat 0 50%;
  font-size: 16px;
}
</style>
